<template>
	<div class="back_contain_n">
		<div class="leftList">
			<li v-for="(item,index) in paramList" :key="index"
				:class="{'active': viewType == item.key}"
				@click="changeView(item)"
			>
				<el-badge :value="item.num" class="item">
					<span>{{item.name}}</span>
				</el-badge>
			</li>
		</div>
		<!-- 头部搜索 -->
		<div class="Search_Top_Part">
			<div class="search_list">
				<div>
					<!--<div class="input_flex">-->
					<!--<el-select clearable v-model="query.searchInput1" placeholder="检测类型">-->
					<!--<el-option label="1" value="1"></el-option>-->
					<!--</el-select>-->
					<!--</div>-->
					<!--<div class="input_flex">-->
					<!--<el-input clearable v-model="query.searchInput2" placeholder="工序"></el-input>-->
					<!--</div>-->
					<div class="input_flex">
						<el-input clearable v-model="queryForm.deviceCode" placeholder="设备号"></el-input>
					</div>
					<div class="input_flex daterange">
						<el-date-picker v-model="time"
										type="daterange"
										range-separator="-"
										start-placeholder="开始日期"
										end-placeholder="结束日期">
						</el-date-picker>
					</div>
					<div class="input_flex">
						<el-select clearable  filterable v-model="queryForm.tabType" placeholder="类型">
							<el-option label="质检" value="1"></el-option>
							<el-option label="巡检" value="2"></el-option>
						</el-select>
					</div>
				</div>
			</div>
			<div class="search_bt">
				<span class="zll-search" @click="getList">搜索</span>
				<span class="zll-search-reset" @click="searchReset()">重置</span>
			</div>
		</div>
		<div class="Search_Top_Input">
			<div class="addNew">
				<span class="tai" @click="exportPdf" v-if="hasRole('') "><i class="iconfont icon-PDF"></i> PDF导出</span>
			</div>
		</div>
		<!-- table -->
		<sys-table class="m_table"
				   ref="systable"
				   :isMultipleSelection="false"
				   :tableData="tableData"
				   :tableLoading="tableLoading"
				   :tableHeader="tableHeader"
				   :scopeWidth="120"
				   :backCount="backCount"
				   :isOperate="false"
				   @getBackData="getList"
		>
		</sys-table>
	</div>
</template>

<script>
	import {formatDate} from "@/plugins/formatDate";
	import {Loading} from 'element-ui';
	import {getStore} from "@/plugins/localStore";

	export default {
		data() {
			return {
				viewType: 'U直',
				paramList: [
					{name: "U直", key: 'U直', type: '挤塑直切'},
					{name: "伸直", key: '伸直', type: '挤塑直切'},
					{name: "普直", key: '普直', type: '挤塑直切'},
					{name: "U管成型", key: 'U管成型', type: '成型'},
					{name: "单多支", key: '单多支', type: '包装'},
					{name: "伸缩", key: '伸缩', type: '包装'},
					{name: "U型", key: 'U型', type: '包装'},
				],
				tableLoading: true, //table刷新
				queryForm: {
					deviceCode: '',
					type:'1',
					tabType:'1',
				},
				backCount: 0,
				tableData: [],
				tableHeader: [],
				time: [],

				copyQueryForm: null,

			}
		},
		methods: {

			exportPdf() {
				let self = this;
				if (self.copyQueryForm == null) {
					self.$message.warning('请先查询有效的数据');
					return;
				}
				let loadingInstance = Loading.service({
					lock: true,
					text: '正在导出pdf...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				self.copyQueryForm.name = getStore().userName;
				self.$http({
					url: "/jinl/checkLine/exportCheckLineList",
					method: "post",
					data: JSON.stringify(self.copyQueryForm),
					dataType: 'json',
					contentType: 'application/json',
				}).then(resp => {
					loadingInstance.close();
					if (resp.success) {
						let filepath = resp.result;
						window.open(filepath, '_blank');
						return;
					}
					self.$message.error(resp.message);
				});
			},


			changeView(val) {
				this.viewType = val.key;
				this.getList()
			},
			getTableHeader() {
				if (this.viewType == '单多支') {
					this.tableHeader = [
						{"columnValue": "deviceCode", "columnName": "设备号"},
						{"columnValue": "planName", "columnName": "产品名称"},
						{"columnValue": "gradeValue", "columnName": "规格"},
						{"columnValue": "moKuan", "columnName": "膜宽"},
						{"columnValue": "value1", "columnName": "单排包支数"},
						{"columnValue": "value2", "columnName": "单支克重"},
						{"columnValue": "value3", "columnName": "膜间距(mm)"},
						{"columnValue": "value4", "columnName": "炸膜"},
						{"columnValue": "value5", "columnName": "压管"},
						{"columnValue": "value6", "columnName": "杂质"},
						{"columnValue": "value7", "columnName": "异物"},
						{"columnValue": "value8", "columnName": "外观"},
						{"columnValue": "value9", "columnName": "切印效果"},
						{"columnValue": "value10", "columnName": "上膜平整度"},
						{"columnValue": "value11", "columnName": "机台温度（℃）"},
						{"columnValue": "createTimeFt", "columnName": "检测时间"},
						{"columnValue": "userName", "columnName": "检测员"},
					]
				} else if (this.viewType == 'U型') {
					this.tableHeader = [
						{"columnValue": "deviceCode", "columnName": "设备号"},
						{"columnValue": "planName", "columnName": "产品名称"},
						{"columnValue": "gradeValue", "columnName": "规格"},
						{"columnValue": "moKuan", "columnName": "膜宽"},
						{"columnValue": "value1", "columnName": "总长(mm)"},
						{"columnValue": "value2", "columnName": "长相(mm)"},
						{"columnValue": "value3", "columnName": "短相(mm)"},
						{"columnValue": "value4", "columnName": "螺纹"},
						{"columnValue": "value5", "columnName": "间距(mm)"},
						{"columnValue": "value6", "columnName": "单支克重"},
						{"columnValue": "value7", "columnName": "异物"},
						{"columnValue": "value8", "columnName": "炸膜"},
						{"columnValue": "value9", "columnName": "气味"},
						{"columnValue": "value10", "columnName": "机台温度（℃）"},
						{"columnValue": "createTimeFt", "columnName": "检测时间"},
						{"columnValue": "userName", "columnName": "检测员"},
					]
				} else if (this.viewType == '伸缩') {
					this.tableHeader = [
						{"columnValue": "deviceCode", "columnName": "设备号"},
						{"columnValue": "planName", "columnName": "产品名称"},
						{"columnValue": "gradeValue", "columnName": "规格"},
						{"columnValue": "moKuan", "columnName": "膜宽"},
						{"columnValue": "value1", "columnName": "拉伸(mm)"},
						{"columnValue": "value2", "columnName": "缩回(mm)"},
						{"columnValue": "value3", "columnName": "单管克重"},
						{"columnValue": "value4", "columnName": "间距(mm)"},
						{"columnValue": "value5", "columnName": "压印"},
						{"columnValue": "value6", "columnName": "拉力(N)"},
						{"columnValue": "value7", "columnName": "卡口"},
						{"columnValue": "value8", "columnName": "异物"},
						{"columnValue": "value9", "columnName": "尖口"},
						{"columnValue": "value10", "columnName": "扩口"},
						{"columnValue": "value11", "columnName": "缩口"},
						{"columnValue": "value12", "columnName": "封口"},
						{"columnValue": "createTimeFt", "columnName": "检测时间"},
						{"columnValue": "userName", "columnName": "质检员"},
					]
				}else if (this.viewType == 'U直'||this.viewType == '伸直'||this.viewType == '普直') {
					this.tableHeader = [
						{"columnValue": "deviceCode", "columnName": "设备号"},
						{"columnValue": "planName", "columnName": "产品名称"},
						{"columnValue": "gradeValue", "columnName": "规格"},
						{"columnValue": "value1", "columnName": "直径±0.1mm"},
						{"columnValue": "value2", "columnName": "长度±2mm"},
						{"columnValue": "value3", "columnName": "产品重量"},
						{"columnValue": "value4", "columnName": "气味"},
						{"columnValue": "value5", "columnName": "杂质"},
						{"columnValue": "value6", "columnName": "外观"},
						{"columnValue": "value7", "columnName": "壁厚≤0.02mm"},
						{"columnValue": "value8", "columnName": "尖口≥45°"},
						{"columnValue": "createTimeFt", "columnName": "检测时间"},
						{"columnValue": "userName", "columnName": "质检员"},
					]
				} else {
					this.tableHeader = [
						{"columnValue": "deviceCode", "columnName": "设备号"},
						{"columnValue": "planName", "columnName": "产品名称"},
						{"columnValue": "gradeValue", "columnName": "规格"},
						{"columnValue": "value1", "columnName": "管坯长度"},
						{"columnValue": "value2", "columnName": "长相"},
						{"columnValue": "value3", "columnName": "短相"},
						{"columnValue": "value4", "columnName": "螺纹"},
						{"columnValue": "value5", "columnName": "拉伸总长"},
						{"columnValue": "createTimeFt", "columnName": "检测时间"},
						{"columnValue": "userName", "columnName": "质检员"},
					]
				}
			},

			getList(startIndex, pageRow) {
				let self = this;
				self.tableLoading = true;
				self.copyQueryForm = null;
				if (this.time && this.time.length == 2) {
					//date类型
					self.queryForm.startTime = formatDate(new Date(self.time[0]), 'yyyy-MM-dd')
					self.queryForm.endTime = formatDate(new Date(self.time[1]), 'yyyy-MM-dd') + ' 23:59:59'
				} else {
					self.$message.warning('请选中查询时间段（时间间隔最多为1年）');
					return;
				}
				let startDate = new Date(self.time[0]);
				let endDate = new Date(self.time[1]);
				if (endDate.getTime() - startDate.getTime() > 365*24*3600*1000){
					self.$message.warning('时间间隔最多为1年');
					return;
				}
				let pageInfo = self.$refs.systable.getPageInfo(startIndex);
				if (pageInfo.pageNum == 0||startIndex == 0) {
					self.$refs.systable.resetPage();
				}
				self.queryForm.startIndex = pageInfo.pageNum;
				self.queryForm.totalPage = pageInfo.pageSize;
				let param = Object.assign({}, self.queryForm);
				let tab = self.paramList.find((item)=>item.key == this.viewType);
				param.processName = tab.type;
				if(tab.key =='单多支'){
					param.processCategorys = ['单支连排','多支'];
				}else{
					param.processCategory = tab.key;
				}
				self.copyQueryForm = Object.assign({},param);
				self.$http({
					url: "/jinl/checkLine/getHistoryCheckLineLists",
					method: "post",
					data: JSON.stringify(param),
					dataType: 'json',
					contentType: 'application/json',
				}).then(resp => {
					if (resp.success) {
						self.tableLoading = false;
						self.tableData = resp.result;
						self.getTableHeader();
						if (resp.result.length > 0) {
							self.backCount = resp.result[0].count;
						} else {
							self.backCount = 0;
						}
					}
				});

			},

			searchReset() { //重置搜索
				this.time[1] = formatDate(new Date(), 'yyyy-MM-dd');
				let timestamp = new Date().getTime()- 30*24*3600*1000;
				this.time[0] = formatDate(new Date(timestamp), 'yyyy-MM-dd');
				this.queryForm = {
					deviceCode: '',
					type:'1',
					tabType:'1',
				};
				this.getList();
			},

		},
		created(){
			let self = this;
			self.time[1] = formatDate(new Date(), 'yyyy-MM-dd');
			let timestamp = new Date().getTime()- 30*24*3600*1000;
			self.time[0] = formatDate(new Date(timestamp), 'yyyy-MM-dd');
		},
		mounted() {
			let self = this;
			self.getList()
		},

		components: {},
	}
</script>

<style lang="scss" scoped>
	@import "@/style/SearchTop.scss";

	.search_list {
		display: flex;
		justify-content: space-between;

		.sb_ {
			margin-right: 20px;

			.input_flex {
				width: auto;
				display: flex;
				align-items: center;
			}
		}
	}

	.leftList {
		display: flex;
		margin-bottom: 15px;

		li {
			list-style: none;
			width: 100px;
			height: 30px;
			line-height: 28px;
			border-bottom: 1px solid #fff;
			color: #333;
			text-align: center;
			cursor: pointer;
			margin-bottom: 10px;
			transition: all .5s;
			position: relative;
			display: flex;
			justify-content: center;

			&.active {
				color: #ff9935;
				border-color: #ff9935;
				position: relative;
				font-weight: 600;
				font-size: 14px;
			}
		}
	}
</style>